<template>
  <div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="指标分析" name="first">
        <div class="search">
          <el-date-picker
            type="date"
            v-model="time"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
          <el-cascader
            expand-trigger="hover"
            :options="codeoptions"
            v-model="zhibiaocodearr"
            @change="handleChange2"
          ></el-cascader>
          <el-button class="btntable2" @click="getzhibiaolist2">查&nbsp;&nbsp;&nbsp;询</el-button>
        </div>
        <echartsdata3 :namedata="namedata" :zhibiaodata="zhibiaodata" :startvalue="startvalue" :xvalue="xvalue" v-if="alive"></echartsdata3>
        <!-- <echartsdata :namedata="namedata" :zhibiaodata="zhibiaodata" v-if="alive"></echartsdata> -->
      </el-tab-pane>
      <el-tab-pane label="数据查询" name="second">
        <div class="search">
          <el-input v-model="query" placeholder="请输入设备名称" style="width:200px" clearable></el-input>
          <el-date-picker
            clearable
            v-model="date1"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
          <el-time-picker
            is-range
            clearable
            :disabled="date1==''"
            v-model="date2"
            value-format="HH:mm:ss"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            style="width:33%"
            placeholder="选择时间范围"
          ></el-time-picker>
          <el-cascader
            placeholder="请选择数据"
            expand-trigger="hover"
            :options="codeoptions"
            v-model="paramCodeId2"
            @change="handleChange"
            clearable
          ></el-cascader>
          <el-button class="btntable2" @click="getanalyzelist">查&nbsp;&nbsp;&nbsp;询</el-button>
        </div>
        <el-table
          class="tablecolor"
          ref="singleTable"
          :data="analyzelist"
          style="width: 100%;text-align:center;"
        >
          <el-table-column type="index" label="序列" width="100px"></el-table-column>
          <el-table-column property="device.powerDistName" label="配电箱名称"></el-table-column>
          <el-table-column property="device.deviceName" label="设备名称"></el-table-column>
          <el-table-column property="device.deviceId" label="设备编号"></el-table-column>
          <el-table-column property="intime" label="时间"></el-table-column>
          <el-table-column property="paramCode.codeName" label="数据名称"></el-table-column>
          <el-table-column label="数据">
            <template slot-scope="scope">{{scope.row.value}}{{scope.row.dataCode.measure}}</template>
          </el-table-column>
          <!-- <el-table-column property="state" label="数据分析"></el-table-column> -->
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :currentPage.sync="currentPage"
          :pageSize="pagesize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          style="text-align:center;margin:20px 0"
        ></el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import echartsdata from '~/components/echartsdata.vue'
import echartsdata3 from '~/components/echartsdata3.vue'
export default {
  data() {
    return {
      ordertamp: [
        '00',
        '01',
        '02',
        '03',
        '04',
        '05',
        '06',
        '07',
        '08',
        '09',
        '10',
        '11',
        '12',
        '13',
        '14',
        '15',
        '16',
        '17',
        '18',
        '19',
        '20',
        '21',
        '22',
        '23'
      ],
      alive: true,
      ts: this.newStore(),
      currentPage: 1,
      pagesize: 10,
      startvalue:'',
      total: 0,
      zhibiaodata: [],
      namedata: [],
      analyzelist: [],
      query: '',
      codeoptions: [],
      paramCodeId2: [],
      paramCodeId: '',
      zhibiaocodearr: [],
      zhibiaocode: '',
      date1: '',
      zhibiao: [],
      date2: '',
      activeName: 'first',
      time: '',
      xvalue:[]
    }
  },
  components: {
    echartsdata,
    echartsdata3
  },
  created() {
       
    this.getcodeList()
    this.getanalyzelist()
  },
  methods: {
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      this.time = year + seperator1 + month + seperator1 + strDate
    },
    reload() {
      this.alive = false
      this.$nextTick(() => {
        this.alive = true
      })
    },
    getzhibiaolist2() {
      this.namedata = []
      this.zhibiaodata = []
      const req = {
        time: this.time,
        hour_num: '24',
        paramCodeId: this.zhibiaocode
      }
      this.spost(this.ts, '/data/getdatatabzhexian', req).then(ts => {
        let a = []
        this.xvalue=[]
        let res_a = []
        for (let i = 0; i < ts.d.length; i += 1) {
          if (this.xvalue.indexOf(ts.d[i].device_hour) == -1) {
            this.xvalue.push(ts.d[i].device_hour)
          }
          
          if (a.indexOf(ts.d[i].device_name) == -1) {
            a.push(ts.d[i].device_name) 
          }
        }
        this.namedata = a

        for (let i = 0; i < a.length; i++) {
          let b = []
          for (let j = 0; j < ts.d.length; j++) {
            if (ts.d[j].device_name == a[i]) {
              let d = []
              d[0] = ts.d[j].device_hour
              d[1] = Number(ts.d[j].value)
              b.push(d)
            }
          }

          

          let res_j = {
            name: a[i],
            type: 'line',
            data: b
          }
          res_a.push(res_j)
        }
        this.zhibiaodata = res_a

        this.reload()
        // console.log('res_a', res_a)
      })
    },
    // getzhibiaolist() {
    //   this.namedata = []
    //   this.zhibiaodata = []
    //   const req = {
    //     time: this.time,
    //     hour_num: '24',
    //     paramCodeId: this.zhibiaocode
    //   }
    //   this.spost(this.ts, '/data/getdatatabzhexian', req).then(ts => {
    //     console.log(ts.d)
    //     let a = []

    //     let temp_j = {
    //       '00': 0,
    //       '01': 0,
    //       '02': 0,
    //       '03': 0,
    //       '04': 0,
    //       '05': 0,
    //       '06': 0,
    //       '07': 0,
    //       '08': 0,
    //       '09': 0,
    //       '10': 0,
    //       '11': 0,
    //       '12': 0,
    //       '13': 0,
    //       '14': 0,
    //       '15': 0,
    //       '16': 0,
    //       '17': 0,
    //       '18': 0,
    //       '19': 0,
    //       '20': 0,
    //       '21': 0,
    //       '22': 0,
    //       '23': 0
    //     }

    //     let res_a = []

    //     for (let i = 0; i < ts.d.length; i += 1) {
    //       if (a.indexOf(ts.d[i].device_name) == -1) {
    //         a.push(ts.d[i].device_name) //['1','设备11111']
    //       }
    //     }
    //     this.namedata = a
    //     for (let i = 0; i < a.length; i++) {
    //       let b = Object.assign({}, temp_j)
    //       // console.log(b)

    //       for (let j = 0; j < ts.d.length; j++) {
    //         if (ts.d[j].device_name == a[i]) {
    //           b[ts.d[j].device_hour] = ts.d[j].value
    //         }
    //       }

    //       let arr = []
    //       for (let j = 0; j < this.ordertamp.length; j++) {
    //         arr.push(b[this.ordertamp[j]])
    //       }

    //       // console.log('arrr', arr)

    //       let res_j = {
    //         name: a[i],
    //         type: 'line',
    //         stack: '总量',
    //         data: arr
    //       }

    //       res_a.push(res_j)
    //     }
    //     this.zhibiaodata = res_a
    //     this.reload()
    //     console.log('res_a', res_a)
    //   })
    // },
    getcodeList() {
      const req = {
        sup_code_id: '01'
      }
      this.spost(this.ts, '/code/findcodebysupcodeid', req).then(ts => {
        this.codeList = ts.d
        for (let i = 0; i < this.codeList.length; i++) {
          let a = { children: [] }

          a.value = this.codeList[i].codeId
          a.label = this.codeList[i].codeName
          for (let j = 0; j < this.codeList[i].childCode.length; j++) {
            let b = {}
            b.value = this.codeList[i].childCode[j].codeId
            b.label = this.codeList[i].childCode[j].codeName
            a.children.push(b)
          }
          this.codeoptions.push(a)
          // console.log('this.codeoptions', this.codeoptions)
        }
        if (this.codeoptions[0].children[0].value) {
          this.zhibiaocodearr = [
            this.codeoptions[0].value,
            this.codeoptions[0].children[0].value
          ]
          this.zhibiaocode = this.codeoptions[0].children[0].value
        }

        if (this.$route.query.paramCodeId&&this.$route.query.intime&&this.$route.query.supCodeId) {
          console.log(this.$route.query.intime);
          
          this.zhibiaocodearr=[this.$route.query.supCodeId,this.$route.query.paramCodeId]
          this.time=this.$route.query.intime.split(' ')[0]
          this.getzhibiaolist2()
          
        }else{
          this.getNowFormatDate()
          this.getzhibiaolist2()
        }
      })
    },
    handleChange(val) {
      this.paramCodeId = val[1]
    },
    handleChange2(val) {
      // console.log(val)

      this.zhibiaocode = val[1]
    },
    handleCurrentChange() {
      this.getanalyzelist()
    },
    getanalyzelist() {
      // console.log(this.date2)
      if (this.date2 == null) {
        this.date2 = ''
      }
      const req = {
        query: this.query,
        dateTime: this.date1,
        startTime: this.date2[0],
        endTime: this.date2[1],
        paramCodeId: this.paramCodeId,
        pageNum: this.currentPage - 1,
        pageSize: this.pagesize
      }
      this.spost(this.ts, '/data/getdatatablelist', req).then(ts => {
        // console.log(ts.d)
        this.analyzelist = ts.d.content
        this.total = parseInt(ts.d.totalElements)
      })
    }
    //编辑local信息
  }
}
</script>

<style>
.el-cascader-node:not(.is-disabled):focus, .el-cascader-node:not(.is-disabled):hover{
  background: #111c3f
}
.el-time-spinner__item:hover:not(.disabled):not(.active){
  background: #EAAF4F
}
.el-cascader-menu, .el-cascader-menu__item.is-disabled:hover{
  background: #111c3f
}
.el-cascader-menu__item:focus:not(:active), .el-cascader-menu__item:hover{
    background: #111c3f;
  color: #23ffff
}
.el-picker-panel__icon-btn{
  color: #fff
}
.el-cascader-menus{
  background: #111c3f;
  color: #fff
}
.el-picker-panel{
  background: #111c3f;
  color: #fff;
  border: 1px solid #233a62
}
.el-tabs--border-card > .el-tabs__header {
  border-bottom: 1px solid #20365d;
}
.el-range-editor.is-disabled input {
  background: rgba(12, 58, 108, 0.4);
}
.el-range-editor .el-range-input {
  background: rgba(12, 58, 108, 0.4);
  color: #23ffff;
}
.el-table th,
.el-table tr {
  background: inherit;
}
.el-table td,
.el-table th.is-leaf {
  border: 0;
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(12, 58, 108, 0.4);
}
.el-range-editor.is-disabled {
  background: rgba(8, 10, 14, 0);
  color: #23ffff;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
  background: rgba(13, 23, 54, 0.5);
}
.el-pagination button:disabled {
  background: rgba(13, 23, 54, 0.5);
}
.el-pager li {
  background: rgba(13, 23, 54, 0.5);
  border: 1px transparent solid;
  border-image: linear-gradient(to bottom right, #2e5873, #111c3f) 1 10;
}
.el-cascader__label {
  color: #23ffff;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #ffae5e;
  color: #333;
}
.el-tabs--border-card > .el-tabs__header {
  background: rgba(8, 10, 14, 0);
}
.el-button:focus,
.el-button:hover {
  background: url('../../static/img/btntable3.png') no-repeat;
  background-size: cover;
  border: 0;
  padding: 15px 37px;
  color: #fff;
}
.el-button {
  border: 0;
}
.el-tabs--border-card {
  background: rgba(32, 44, 81, 0.4);
  border: 0;
}
.el-input__inner {
  background: rgba(8, 10, 14, 0);
  border: 1px transparent solid;
  border-image: linear-gradient(to bottom right, #2e5873, #111c3f) 1 10;
  color: #23ffff;
}
.cell {
  text-align: center;
}
.cell div {
  text-align: center;
}
.search {
  margin-bottom: 10px;
}
</style>
